<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/echarts.min.js"></script>

    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/js/jquery-2.2.3.min.js" charset="utf-8"></script>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md6">
        <div id="main" style="height: 600px;width: 100%" ></div>
    </div>
    <div class="layui-col-md6">
        <img src="/img/jieshao.jpeg" style="height: 300px;width:100%;margin-top: 100px">     </div>
    </div>
</div>



<script type="text/javascript" th:inline="none" >


    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option2;


    option2 = {
        title: {
            text: '抽奖查询'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['商品a', '商品b', '商品c', '商品d', '商品e', '商品f']
        },
        series: [
            {
                name: '中奖数',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
                name: '抽奖数',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };
    myChart.setOption(option2);














</script>
</body>
</html>